<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:fn="http://java.sun.com/jsp/jstl/functions"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:pe="http://primefaces.org/ui/extensions">

<ui:composition template="/template.xhtml">
	<ui:define name="body">
		<h:form id="main">
			<p:hotkey bind="n" handler="clickButton('main:btnNew')" />
			<p:hotkey bind="r" handler="clickButton('main:btnReset')" />
			<p:growl id="growl" life="4000" showDetail="true" autoUpdate="true" />
			<p:panel header="P/O Search Form" style="width: 700;"  toggleable="true">

				<p:panelGrid columns="4" cellpadding="2" id="panelSearch">


					<f:facet name="footer" style="text-align: right">
						<p:commandButton id="btnSearch" value="Search"
							action="#{purchaseOrdersMgb.search}" ajax="true" icon="ui-icon-search"
							update="panelResult" />

						<p:commandButton value="Reset" update="panelSearch, panelResult"
							icon="ui-icon-arrowreturnthick-1-w" immediate="true"
							action="#{purchaseOrdersMgb.reset}" process="@this" id="btnReset" />

						<p:commandButton id="btnNew" value="New"
							oncomplete="rowDialog.show()" action="#{purchaseOrdersMgb.add}"
							icon="ui-icon-circle-plus"  update=":detail:display :detail:pnlPODetailItem"/>

					</f:facet>

					<p:outputLabel value="Id" />
					<p:inputText value="#{purchaseOrdersMgb.idSearch}" label="id" id="idSearch" />
					<p:outputLabel value="Name" />
					<p:inputText value="#{purchaseOrdersMgb.docNoSearch}" label="name" id="docNoSearch" />
					

				</p:panelGrid>

				<p:blockUI block="panelSearch" trigger="btnSearch" />
			</p:panel>
			 
			<p:panel id="panelResult">
				
				<p:dataTable var="row" value="#{purchaseOrdersMgb.resultSearch}"
					selectionMode="single" rowKey="#{row.id}" style="width: 700"
					selection="#{purchaseOrdersMgb.selected}" id="dataResult"
					paginator="true" rows="#{constDataTable.pageRows}"
					paginatorTemplate="#{constDataTable.paginatorTemplate}"
					rowsPerPageTemplate="#{constDataTable.rowsPerPageTemplate}"
					scrollable="true" scrollHeight="#{constDataTable.scrollHeight}"
					binding="#{purchaseOrdersMgb.dtResult}"
				>

					<p:column sortBy="#{row.id}">
						<f:facet name="header">
							<h:outputText value="P/O Id" />
						</f:facet>
						<p:commandLink value="#{row.id}"
							action="#{purchaseOrdersMgb.view(row)}" oncomplete="rowDialog.show()"
							update=":detail:display :detail:dataDetails :detail:pnlPODetailItem" id="linkDetail" />

					</p:column>

					<p:column sortBy="#{row.docNo}">
						<f:facet name="header">
							<h:outputText value="P/O No." />
						</f:facet>
						<h:outputText value="#{row.docNo}" />
					</p:column>

					<f:facet name="footer">
						<h:outputText
							value="Total: #{fn:length(purchaseOrdersMgb.resultSearch)}" id="rowCount"/>
							
					</f:facet>
				</p:dataTable>
			
			</p:panel>
			<h:commandLink id="pdf">
              <p:outputLabel value="Export"></p:outputLabel>
                <p:dataExporter type="csv" target="dataResult" fileName="ProductCategories"/>
            </h:commandLink>
		</h:form>
		<h:form id="detail">
			<p:dialog id="dialog" header="P/O Detail" widgetVar="rowDialog"
				resizable="true" width="85%" height="600" showEffect="clip" hideEffect="explode"
				position="center center" closeOnEscape="true">

				<h:panelGrid id="display" columns="6" cellpadding="2">
					
					
					<p:outputLabel value="P/O No.:" style="font-weight:bold" />
					<p:inputText value="#{purchaseOrdersMgb.selected.docNo}"
						style="width: 150px" required="true" label="P/O No."
						id="docNo" />
						
					<p:outputLabel value="Company :" style="font-weight:bold" />
					<p:selectOneMenu value="#{purchaseOrdersMgb.selected.companyId}" filter="true" filterMatchMode="startsWith" style="width:120px" 
					rendered="#{purchaseOrdersMgb.selected!=null}">  
			            <f:selectItem itemLabel="Select Company" itemValue="" />  
			            <f:selectItems value="#{purchaseOrdersMgb.companies}" var="com" itemLabel="#{com.name}" itemValue="#{com.id}" />  
			        </p:selectOneMenu>  	
			        
					<p:outputLabel value="Doc Date:" style="font-weight:bold" />
					<p:calendar value="#{purchaseOrdersMgb.selected.docDate}"
						pattern="dd MMM yyyy" id="docDate" showOn="button" />
											
					<p:outputLabel value="Order Date:" style="font-weight:bold" />
					<p:calendar value="#{purchaseOrdersMgb.selected.orderDate}"
						pattern="dd MMM yyyy" id="orderDate" showOn="button" />
					
					<p:outputLabel value="Receive Plan Date:" style="font-weight:bold" />
					<p:calendar value="#{purchaseOrdersMgb.selected.receivePlanDate}"
						pattern="dd MMM yyyy" id="receivePlanDate" showOn="button" />					
		             	
		            <p:outputLabel value="VAT :" style="font-weight:bold" />
					<pe:inputNumber id="vat" value="#{purchaseOrdersMgb.selected.vat}">  
		                <p:ajax event="blur" />  
		            </pe:inputNumber>  	
		            
		            <p:outputLabel value="VAT Percent :" style="font-weight:bold" />
					<pe:inputNumber id="vatPercent" value="#{purchaseOrdersMgb.selected.vatPercent}">  
		                <p:ajax event="blur" />  
		            </pe:inputNumber> 
		            
		            <p:outputLabel value="Discount Percent :" style="font-weight:bold" />
					<pe:inputNumber id="discountPercent" value="#{purchaseOrdersMgb.selected.discountPercent}">  
		                <p:ajax event="blur" />  
		            </pe:inputNumber> 
		            
					<p:outputLabel value="Discount :" style="font-weight:bold" />
					<pe:inputNumber id="discount" value="#{purchaseOrdersMgb.selected.discount}">  
		                <p:ajax event="blur" />  
		            </pe:inputNumber>  
		            
					<p:outputLabel value="Grand Total:" style="font-weight:bold" />
					<pe:inputNumber id="grandTotal" value="#{purchaseOrdersMgb.selected.grandTotal}">  
		                <p:ajax event="blur" />  
		            </pe:inputNumber> 
		            
					<f:facet name="footer" >
						<p:commandButton id="btnSave" value="Save" icon="ui-icon-check"
							action="#{purchaseOrdersMgb.savePurchaseOrder}"
							oncomplete="handleDialog(xhr, status, args, rowDialog)"
							update=":main:growl :main:panelResult" />
						<p:commandButton id="btnDelete" value="Delete"
							icon="ui-icon-circle-minus"
							onclick="confirmation.show();return false;"
							oncomplete="rowDialog.hide()"
							rendered="#{purchaseOrdersMgb.selected.id!=null}" />
						<p:commandButton id="btnCancel" value="Cancel"
							icon="ui-icon-cancel" oncomplete="rowDialog.hide()"
							process="@this">
							<p:resetInput target=":detail:display" />
						</p:commandButton>
					</f:facet>
				</h:panelGrid>
				<h:panelGrid columns="9" cellpadding="2" id="pnlPODetailItem" >
					<p:outputLabel value="Product:" style="font-weight:bold" />
					<p:selectOneMenu id="prodcutItem" value="#{purchaseOrdersMgb.newDetail.productId}" 
						filter="true" filterMatchMode="contains" style="width:200px">  
			            <f:selectItem itemLabel="Select Product" itemValue="" />  
			            <f:selectItems value="#{purchaseOrdersMgb.listProducts}" 
			            	var="prd" itemLabel="#{prd.code}-#{prd.name}" itemValue="#{prd.id}" />  
			        </p:selectOneMenu>  
			        
			        <p:outputLabel value="Quantity:" style="font-weight:bold" />
		        	<pe:inputNumber id="qty" value="#{purchaseOrdersMgb.newDetail.qty}">  
                		<p:ajax event="blur" />
                	</pe:inputNumber>
                	
	                <p:outputLabel value="Unit(s):" style="font-weight:bold" />
	                <p:outputLabel id="unit" value="#{purchaseOrdersMgb.newDetail.unit}" />
	                
	                <p:outputLabel value="Unit Price:" style="font-weight:bold" />
			        <pe:inputNumber id="unitPrice" value="#{purchaseOrdersMgb.newDetail.unitPrice}">  
	                	<p:ajax event="blur" />
	                </pe:inputNumber>    
	            
			        <p:commandButton id="btnAddProduct" value="Add"
							icon="ui-icon-plus" action="#{purchaseOrdersMgb.addPODetail}" 
							update=":detail:dataDetails :detail:pnlPODetailItem" />
					
				</h:panelGrid>
				<p:dataTable var="row" value="#{purchaseOrdersMgb.poDetails}"
					selectionMode="single" rowKey="#{row.id}" style="width: 400"
					 id="dataDetails"
					paginator="true" rows="#{constDataTable.pageRows}"
					paginatorTemplate="#{constDataTable.paginatorTemplate}"
					rowsPerPageTemplate="#{constDataTable.rowsPerPageTemplate}"
					scrollable="true" scrollHeight="100" editable="true" editMode="cell">
					<p:column width="20">
						<f:facet name="header">
							<h:outputText value="-" />
						</f:facet>
						<p:commandLink value="X"
							action="#{purchaseOrdersMgb.removeItem(row)}" 
							update=":detail:display :detail:dataDetails " 
							id="linkPOItem" />
					</p:column>
					<p:column sortBy="#{row.productCode}">
						<f:facet name="header">
							<h:outputText value="Code" />
						</f:facet>
						<h:outputText value="#{row.productCode}" />
					</p:column>

					<p:column sortBy="#{row.productName}">
						<f:facet name="header">
							<h:outputText value="Product Name" />
						</f:facet>
						<h:outputText value="#{row.productName}" />
					</p:column>

					<p:column sortBy="#{row.qty}">
						<f:facet name="header">
							<h:outputText value="Quantity" />
						</f:facet>
						<p:cellEditor>
			                <f:facet name="output"><h:outputText value="#{row.qty}" /></f:facet>
			                <f:facet name="input">
			                	<pe:inputNumber id="qty" value="#{row.qty}">  
			                		<p:ajax event="blur" />
			                	</pe:inputNumber>
			                </f:facet>
			            </p:cellEditor>
						
					</p:column>

					<p:column sortBy="#{row.unit}">
						<f:facet name="header">
							<h:outputText value="Unit(s)" />
						</f:facet>
						<h:outputText value="#{row.unit}" />
							
					</p:column>
					<p:column sortBy="#{row.unitPrice}">
						<f:facet name="header">
							<h:outputText value="Unit Price" />
						</f:facet>
						<h:outputText value="#{row.unitPrice}" />
							
					</p:column>
				</p:dataTable>				
				
			</p:dialog>
			<p:confirmDialog id="confirmDialog"
				message="Do you want to delete record?" header="Confirm"
				severity="alert" widgetVar="confirmation" appendTo="@(body)">

				<p:commandButton id="confirm" value="Yes"
					update=":main:growl :main:panelResult"
					oncomplete="rowDialog.hide(); confirmation.hide()"
					action="#{purchaseOrdersMgb.delete}" process="@this" />
				<p:commandButton id="decline" value="No"
					onclick="confirmation.hide();rowDialog.hide();" />

			</p:confirmDialog>
		</h:form>
	</ui:define>

</ui:composition>
</html>